<template>
  <el-dialog
    title="常用流程设置"
    :visible="visible"
    :append-to-body="true"
    @close="handleDialogClose"
    width="700px"
  >
    <el-checkbox-group v-model="checkList">
      <div class="list" v-for="type of data" :key="type.typeId">
        <h1 class="title">{{type.typeName}}</h1>
        <div class="content">
          <el-checkbox
            v-for="item of type.processDefinitions"
            :key="item.id"
            :label="item.key"
          >{{item.name}}</el-checkbox>
        </div>
      </div>
    </el-checkbox-group>
    <div slot="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import WorkOrderApplyService from '../../../../service/work_order_apply'

export default {
  props: {
    show: {
      type: Boolean,
      required: true,
      default: () => false
    },
    data: {
      type: Array,
      required: true,
      default: () => []
    },
    check: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      checkList: []
    }
  },
  methods: {
    // 处理Dialog关闭事件
    handleDialogClose() {
      this.$emit('update:show')
    },
    // 提交表单
    submitForm() {
      const { checkList } = this
      if (checkList.length) {
        WorkOrderApplyService.insertCommonlyFlow(checkList).then(res => {
          this.$message.success(res.message)
          this.visible = false
          this.$emit('success')
        })
      } else {
        this.$message.warning('请选择要添加为常用的流程')
      }
    }
  },
  watch: {
    show(value) {
      this.visible = value
      this.checkList = this.check
    }
  }
}
</script>

<style lang="stylus" scoped>
.list
  margin-bottom 12px
  border 1px solid #e8e8e8
  .title
    height 56px
    line-height 56px
    color rgba(0, 0, 0, 0.85)
    background rgb(234, 234, 234)
    font-size 16px
    font-weight 500
    border-bottom 1px solid #e8e8e8
    border-radius 2px 2px 0 0
    padding 0 32px
    margin-bottom -1px
    zoom 1
  .content
    padding 24px
    box-sizing border-box
    >>> .el-checkbox__label
      font-size 12px
</style>
